import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  Animated,
  TextInput,
  TouchableOpacity
} from 'react-native';
import styles from './settingIndexStyle';
import api from '../../services/api';
import ToastTip from '../global/ToastTip';
import LoadingTip from '../global/LoadingTip';

class SettingPassword extends Component {
    constructor(props) {
		super(props);

		this.state = {
            loadingShow: false,
            curpasswd: '',
            newpasswd: '',
            newrepasswd: '',
            isShowPass1: false,
            isShowPass2: false,
            isShowPass3: false,
		};

		// this._getTabHeight = this._getTabHeight.bind(this);
		// this._onChangeTab = this._onChangeTab.bind(this);

		// this.props.navigator.setOnNavigatorEvent(this._onNavigatorEvent.bind(this));
	}

    componentWillMount() {
		// this._retrieveDetails();
	}

    componentWillUnmount(){
        this.clearTimer && clearTimeout(this.clearTimer);
    }

    async _submitAction(){
        let {curpasswd, newpasswd, newrepasswd} = this.state;
        let { session, actions, dispatch } = this.props;

        if(!curpasswd){
             this.refs.toast.show('请输入当前登录密码');
             return;
        }

        if(/.*[\u4e00-\u9fa5]+.*$/.test(curpasswd)){//判断是否有汉字
            this.refs.toast.show('当前密码不能包含汉字');
            return;
        }

        if(newpasswd.length == 0 || newpasswd.match(/^\s+$/g)){
             this.refs.toast.show('新密码为空，或者全是空格');
             return;
        }

        if(newpasswd.length > 16 || newpasswd.length < 6){//是否符合密码规范
             this.refs.toast.show('新密码请输入6-16个字符');
             return;
        }

        if(/.*[\u4e00-\u9fa5]+.*$/.test(newpasswd)){//判断是否有汉字
            this.refs.toast.show('密码不能包含汉字');
            return;
        }

        if(newpasswd != newrepasswd){
            this.refs.toast.show('密码不一致，请重新输入');
            return;
        }

        this.setState({loadingShow: true});
        let res = await api.post("/housekeeper/modifyPasswdById",{passwd:curpasswd,newPasswd:newpasswd});
        //loading消失
        this.setState({loadingShow: false});

        if(res.cd == 1){
            this.refs.toast.show(res.msg);
        }else{
            this.refs.toast.show(res.msg);
            this.clearTimer = setTimeout(()=>{
                dispatch(actions.session.session_change({
                    ticket:session.stoken,
                    userId:session.user.id,
                    reload: false,
                    group:session.user.group
                }));

                this.props.navigator.pop();
            }, 500);
        }

    }

    _showPass1(){
        let {isShowPass1} = this.state;

        this.setState({
            isShowPass1: !isShowPass1
        });
    }

    _showPass2(){
        let {isShowPass2} = this.state;

        this.setState({
            isShowPass2: !isShowPass2
        });
    }

    _showPass3(){
        let {isShowPass3} = this.state;

        this.setState({
            isShowPass3: !isShowPass3
        });
    }

    render() {

        return (
            <View style={styles.container}>
                <ScrollView
                    style={styles.scrollContainer}
                    scrollEventThrottle={16}>

                    <View style={styles.toolsContainer}>
                        <View style={styles.addBtn}>
                            <Text style={styles.titleText}>当前密码</Text>
                            <TextInput
                                style={styles.centerInput}
                                editable={true}
                                secureTextEntry={true}
                                secureTextEntry={!this.state.isShowPass1}
                                clearButtonMode={'while-editing'}
                                onChangeText={(text)=>{this.setState({curpasswd:text})}}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入当前登录密码'}
                                placeholderTextColor={'#B5B5B5'}
                            />
                        <TouchableOpacity onPress={this._showPass1.bind(this)} style={{padding:15}}>
                                <Image source={this.state.isShowPass1?require('../../../img/hk_login_openeye_icon.png'):require('../../../img/hk_login_closeeye_icon.png')} style={styles.rightImage}/>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.addBtn}>
                            <Text style={styles.titleText}>新密码</Text>
                            <TextInput
                                style={styles.centerInput}
                                editable = {true}
                                clearButtonMode={'while-editing'}
                                secureTextEntry={true}
                                secureTextEntry={!this.state.isShowPass2}
                                onChangeText={(text)=>{this.setState({newpasswd:text})}}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入6-16个字符'}
                                placeholderTextColor={'#B5B5B5'}
                            />
                        <TouchableOpacity onPress={this._showPass2.bind(this)} style={{padding:15}}>
                                <Image source={this.state.isShowPass2?require('../../../img/hk_login_openeye_icon.png'):require('../../../img/hk_login_closeeye_icon.png')} style={styles.rightImage}/>
                            </TouchableOpacity>
                        </View>
                        <View style={[styles.addBtn,{borderBottomWidth:0}]}>
                            <Text style={styles.titleText}>确认密码</Text>
                            <TextInput
                                style={styles.centerInput}
                                editable = {true}
                                secureTextEntry={true}
                                clearButtonMode={'while-editing'}
                                secureTextEntry={!this.state.isShowPass3}
                                onChangeText={(text)=>{this.setState({newrepasswd:text})}}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请确认新密码'}
                                placeholderTextColor={'#B5B5B5'}
                            />
                        <TouchableOpacity onPress={this._showPass3.bind(this)} style={{padding:15}}>
                                    <Image source={this.state.isShowPass3?require('../../../img/hk_login_openeye_icon.png'):require('../../../img/hk_login_closeeye_icon.png')} style={styles.rightImage}/>
                                </TouchableOpacity>
                        </View>

                    </View>
                    <TouchableOpacity onPress={this._submitAction.bind(this)} style={styles.submitActionPhoneBtn}>
                        <Text style={styles.submitActionText}>确定</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ToastTip ref="toast"/>
                <LoadingTip show={this.state.loadingShow}/>
            </View>
        );
    }
}

var connectHelper = require('../../services/connectHelper');
SettingPassword = connectHelper(state => state)(SettingPassword);

module.exports = SettingPassword;
